<template>
    <div class="post-list post" v-for="item in articles" :key="item.id">
        <router-link class="post-card post" :to="`/blog/article/`+item.id">
            <article class="md-text">
                <div class="post-cover">
                    <img class="lazy entered loaded" :src="item.articleCover" data-ll-status="loaded">
                </div>
                <h2 class="post-title">{{ item.articleTitle }}</h2>
                <div class="excerpt">
                    <p>{{ item.articleContent }}</p>
                </div>
                <div class="meta cap"><span class="cap" id="post-meta"><svg style="margin-bottom:2px"
                            xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M6.94 2c.416 0 .753.324.753.724v1.46c.668-.012 1.417-.012 2.26-.012h4.015c.842 0 1.591 0 2.259.013v-1.46c0-.4.337-.725.753-.725s.753.324.753.724V4.25c1.445.111 2.394.384 3.09 1.055c.698.67.982 1.582 1.097 2.972L22 9H2v-.724c.116-1.39.4-2.302 1.097-2.972c.697-.67 1.645-.944 3.09-1.055V2.724c0-.4.337-.724.753-.724">
                            </path>
                            <path fill="currentColor"
                                d="M22 14v-2c0-.839-.004-2.335-.017-3H2.01c-.013.665-.01 2.161-.01 3v2c0 3.771 0 5.657 1.172 6.828C4.343 22 6.228 22 10 22h4c3.77 0 5.656 0 6.828-1.172C22 19.658 22 17.772 22 14"
                                opacity=".5"></path>
                            <path fill="currentColor"
                                d="M18 17a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-5 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0-4a1 1 0 1 1-2 0a1 1 0 0 1 2 0">
                            </path>
                        </svg><time datetime="2024-05-13T02:00:00.000Z">{{ item.createTime }}</time></span>
                    <span class="cap breadcrumb" style="--text-p2:#008080;--theme-block:#00808020"
                        v-for="tag in item.tags" :key="tag.id">
                        <svg style="margin-bottom:1px" xmlns="http://www.w3.org/2000/svg" width="32" height="32"
                            viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77c.079.07.154.145.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14z"
                                opacity=".5"></path>
                            <path fill="currentColor"
                                d="M20 6.238c0-.298-.005-.475-.025-.63a3 3 0 0 0-2.583-2.582C17.197 3 16.965 3 16.5 3H9.988c.116.104.247.234.462.45L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .849.352C14.098 6 14.675 6 15.829 6h.373c1.78 0 2.957 0 3.798.238">
                            </path>
                            <path fill="currentColor" fill-rule="evenodd"
                                d="M12.25 10a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75"
                                clip-rule="evenodd">
                            </path>
                        </svg>
                        <span>{{ tag.tagName }}</span>
                    </span>
                </div>
            </article>
        </router-link>
    </div>
</template>
<script>
import { getArticleById } from "@/api/article";
export default {
    data() {
        return {
            articles: [],
        };
    },
    mounted() {
        getArticleById(this.$route.params.id).then((res) => {
            this.articles = res.data.records;
        });
    },
};
</script>
